import {
  BrowserRouter as Router,
  NavLink,
  useLocation,
  useNavigate,
} from "react-router-dom";

import WujieReact from "wujie-react";
import React, { useState } from "react";
import Button from "antd/es/button";
import { UnorderedListOutlined, CaretUpOutlined } from "@ant-design/icons";
import Routers from "./Routers";

const { bus } = WujieReact;

const subMap = {};

function Nav() {
  const location = useLocation();
  const navigation = useNavigate();

  const degrade = window.Proxy;

  const subMap = {
    inula: [{ key: "首页", path: 'child_home' }, { key: "路由", path: 'child_location' }, { key: '仓库', path: 'child_repo' }],
  }; //副标题

  const [inulaFlag, setInulaFlag] = useState(location.pathname.includes("inula-sub"));
  const [inulaComponentFlag, setInulaComponentFlag] = useState(location.pathname.includes("inulaComponent-sub"));

  // 在 xxx-sub 路由下子应用将激活路由同步给主应用，主应用跳转对应路由高亮菜单栏
  bus.$on("sub-route-change", (name, path) => {
    const mainName = `${name}-sub`;
    const mainPath = `/${name}-sub${path}`;
    const currentPath = window.location.hash.replace("#", "");
    if (currentPath.includes(mainName) && currentPath !== mainPath) {
      navigation(mainPath);
    }
  });

  const handleFlag = (name) => {
    switch (name) {
      case "inula":
        setInulaFlag(!inulaFlag);
        break;
      case "inulaComponent":
        setInulaComponentFlag(!inulaComponentFlag);
        break;
      default:
        break;
    }
  };

  return (
    <nav>
      <img src={'https://www.designevo.com/res/templates/thumb_small/blue-eagle-and-orange-basketball.webp'}></img>
      <NavLink
        to="/home"
        className={({ isActive }) => (isActive ? "active" : "inactive")}
      >
        介绍
      </NavLink>
      <div
        className={window.location.href.includes('inula-sub') ? 'active navItem' : 'inactive navItem'}
        onMouseEnter={() => setInulaFlag(true)}
        onMouseLeave={() => setInulaFlag(false)}
      >
        应用路由
        <CaretUpOutlined
          className={inulaFlag ? "main-icon active" : "main-icon"}
        />
        <div className="sub-menu dropdown" style={{ display: inulaFlag ? "block" : "none" }}>
          {subMap.inula.map((item) => (
            <NavLink to={`/inula-sub/${item.path}`} key={item.key} className={({ isActive }) => (isActive ? "active" : "inactive")}>
              {item.key}
            </NavLink>
          ))}
        </div>
      </div>
      <NavLink
        to="/inulaComponent"
        onClick={() => handleFlag('inulaComponent')}
        className={({ isActive }) => (isActive ? "active" : "inactive")}
      >
        应用市场组件
      </NavLink>
      <Button
        type="primary"
        className="menu-icon"
        icon={<UnorderedListOutlined />}
      ></Button>
    </nav>
  );
}

class App extends React.PureComponent {
  state = {
    active: false,
  };
  changeActive = (val) => {
    this.setState({ active: val });
  };
  render() {
    return (
      <div className="app">
        <Router>
          <div className={this.state.active ? "nav active" : "nav"}>
            <Nav />
          </div>
          <div className="content" onClick={() => this.changeActive(false)}>
            <Routers active={this.active}></Routers>
          </div>
        </Router>
      </div>
    );
  }
}

export default App;
